import React, { useState } from 'react';


function Counter2(props) {
  const [formValue, setFormValue] = useState({
    'age': '18',
    'sex': '男',
    'work': '前端程序员',
  })
  const setVal = (e, keyName) => {
    let obj = Object.assign({}, formValue, {
      [keyName]: e.target.value
    })
    setFormValue(obj)
  }
  return (
    <>
      <h2>年龄：<input type="text" value={formValue.age} onChange={(e) => { setVal(e, 'age') }} /> </h2>
      <h2>性别：<input type="text" value={formValue.sex} onChange={(e) => { setVal(e, 'sex') }} /> </h2>
      <h2>工作：<input type="text" value={formValue.work} onChange={(e) => { setVal(e, 'work') }} /> </h2>
      <button onClick={() => { props.emitValue(formValue) }}>传值给父元素</button>
    </>
  )
}

export default Counter2;